<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询结果 - 粮食收购大数据平台</title>
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus JS -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- Element Plus Icons -->
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .logo {
            font-size: 24px;
            font-weight: 600;
            color: #4CAF50;
        }
        .breadcrumb {
            color: #666;
        }
        .content-grid {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        .info-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .personal-info {
            margin-bottom: 20px;
        }
        .info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .info-item:last-child {
            border-bottom: none;
        }
        .info-label {
            color: #666;
            font-weight: 500;
        }
        .info-value {
            color: #333;
            font-weight: 600;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }
        .stat-item {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
        }
        .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: #4CAF50;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            color: #666;
        }
        .chart-container {
            width: 100%;
            height: 300px;
            margin-top: 20px;
        }
        .records-section {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .records-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .filters {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }
        .summary-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        .summary-card {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
        }
        .summary-card.secondary {
            background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
        }
        .summary-card.tertiary {
            background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
        }
        .summary-number {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        .summary-text {
            font-size: 14px;
            opacity: 0.9;
        }
        .no-data {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }
        .no-data-icon {
            font-size: 64px;
            margin-bottom: 20px;
        }
        .back-actions {
            text-align: center;
            margin-top: 30px;
        }
        @media (max-width: 768px) {
            .content-grid {
                grid-template-columns: 1fr;
            }
            .container {
                padding: 10px;
            }
            .header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            .filters {
                flex-direction: column;
                align-items: stretch;
            }
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 头部 -->
            <div class="header">
                <div class="header-left">
                    <div class="logo"><i class="fas fa-seedling"></i> 粮食收购大数据平台</div>
                    <el-breadcrumb separator="/" class="breadcrumb">
                        <el-breadcrumb-item><a href="index.html">首页</a></el-breadcrumb-item>
                        <el-breadcrumb-item>查询结果</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div>
                    <el-button @click="goBack">
                        <el-icon><ArrowLeft /></el-icon>
                        返回查询
                    </el-button>
                    <el-button type="primary" @click="printResult">
                        <el-icon><Printer /></el-icon>
                        打印结果
                    </el-button>
                </div>
            </div>

            <!-- 主要内容 -->
            <div v-if="hasData">
                <!-- 个人信息和统计 -->
                <div class="content-grid">
                    <!-- 个人信息卡片 -->
                    <div class="info-card">
                        <div class="card-title">
                            <i class="fas fa-user"></i>
                            个人信息
                        </div>
                        
                        <div class="personal-info">
                            <div class="info-item">
                                <span class="info-label">姓名</span>
                                <span class="info-value">{{ personalInfo.name }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">身份证号</span>
                                <span class="info-value">{{ maskedIdCard }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">查询时间</span>
                                <span class="info-value">{{ currentTime }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">数据来源</span>
                                <span class="info-value">粮食收购监管系统</span>
                            </div>
                        </div>
                        
                        <div class="stats-grid">
                            <div class="stat-item">
                                <div class="stat-value">{{ records.length }}</div>
                                <div class="stat-label">收购记录</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value">{{ uniqueCompanies }}</div>
                                <div class="stat-label">合作企业</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value">{{ formatNumber(totalAmount) }}</div>
                                <div class="stat-label">总收购量(公斤)</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value">¥{{ formatNumber(totalValue) }}</div>
                                <div class="stat-label">总收购额</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 收购趋势图 -->
                    <div class="info-card">
                        <div class="card-title">
                            <i class="fas fa-chart-area"></i>
                            收购趋势分析
                        </div>
                        <div ref="trendChart" class="chart-container"></div>
                    </div>
                </div>

                <!-- 汇总统计 -->
                <div class="summary-cards">
                    <div class="summary-card">
                        <div class="summary-number">{{ formatNumber(totalAmount) }}</div>
                        <div class="summary-text">累计收购量 (公斤)</div>
                    </div>
                    <div class="summary-card secondary">
                        <div class="summary-number">¥{{ formatNumber(totalValue) }}</div>
                        <div class="summary-text">累计收购金额 (元)</div>
                    </div>
                    <div class="summary-card tertiary">
                        <div class="summary-number">¥{{ averagePrice }}</div>
                        <div class="summary-text">平均收购价格 (元/公斤)</div>
                    </div>
                </div>

                <!-- 收购记录详情 -->
                <div class="records-section">
                    <div class="records-header">
                        <div class="card-title">
                            <i class="fas fa-clipboard-list"></i>
                            收购记录详情
                            <el-tag type="info" style="margin-left: 10px;">共 {{ filteredRecords.length }} 条记录</el-tag>
                        </div>
                        
                        <div class="filters">
                            <el-select v-model="filters.grainType" placeholder="粮食品种" size="small" clearable style="width: 120px;">
                                <el-option v-for="type in grainTypes" :key="type" :label="type" :value="type"></el-option>
                            </el-select>
                            <el-select v-model="filters.company" placeholder="收购企业" size="small" clearable style="width: 150px;">
                                <el-option v-for="company in companies" :key="company" :label="company" :value="company"></el-option>
                            </el-select>
                            <el-date-picker
                                v-model="filters.dateRange"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="small"
                                style="width: 240px;"
                            >
                            </el-date-picker>
                            <el-button type="primary" size="small" @click="applyFilters">
                                <el-icon><Search /></el-icon>
                                筛选
                            </el-button>
                            <el-button size="small" @click="resetFilters">
                                <el-icon><Refresh /></el-icon>
                                重置
                            </el-button>
                        </div>
                    </div>
                    
                    <el-table :data="paginatedRecords" stripe style="width: 100%">
                        <el-table-column prop="date" label="收购日期" width="120" sortable></el-table-column>
                        <el-table-column prop="grainType" label="粮食品种" width="100">
                            <template #default="scope">
                                <el-tag :type="getGrainTypeColor(scope.row.grainType)" size="small">
                                    {{ scope.row.grainType }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="amount" label="数量(公斤)" width="120" sortable>
                            <template #default="scope">
                                <strong>{{ formatNumber(scope.row.amount) }}</strong>
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="单价(元/公斤)" width="130" sortable>
                            <template #default="scope">
                                <span style="color: #4CAF50; font-weight: 600;">¥{{ scope.row.price.toFixed(2) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="totalValue" label="总价值(元)" width="130" sortable>
                            <template #default="scope">
                                <span style="color: #FF9800; font-weight: 600;">¥{{ formatNumber(scope.row.totalValue) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="company" label="收购企业" min-width="150"></el-table-column>
                        <el-table-column prop="location" label="收购地点" width="120"></el-table-column>
                        <el-table-column label="质量等级" width="100">
                            <template #default="scope">
                                <el-rate v-model="scope.row.quality" disabled show-score text-color="#ff9900" size="small"></el-rate>
                            </template>
                        </el-table-column>
                    </el-table>
                    
                    <div style="margin-top: 20px; text-align: right;">
                        <el-pagination
                            v-model:current-page="pagination.currentPage"
                            v-model:page-size="pagination.pageSize"
                            :page-sizes="[10, 20, 50]"
                            :total="filteredRecords.length"
                            layout="total, sizes, prev, pager, next, jumper"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        >
                        </el-pagination>
                    </div>
                </div>
            </div>

            <!-- 无数据状态 -->
            <div v-else class="records-section">
                <div class="no-data">
                    <div class="no-data-icon"><i class="fas fa-inbox"></i></div>
                    <h3>未查询到收购记录</h3>
                    <p>该身份证号码暂无粮食收购记录，请确认身份证号码是否正确。</p>
                </div>
            </div>

            <!-- 底部操作 -->
            <div class="back-actions">
                <el-button size="large" @click="goBack">
                    <el-icon><ArrowLeft /></el-icon>
                    重新查询
                </el-button>
                <el-button type="primary" size="large" @click="exportData" v-if="hasData">
                    <el-icon><Download /></el-icon>
                    导出数据
                </el-button>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        const { ElMessage } = ElementPlus;

        createApp({
            data() {
                return {
                    personalInfo: {
                        name: '张三',
                        idCard: '320123199001011234'
                    },
                    records: [],
                    filters: {
                        grainType: '',
                        company: '',
                        dateRange: null
                    },
                    pagination: {
                        currentPage: 1,
                        pageSize: 10
                    },
                    trendChart: null
                }
            },
            computed: {
                hasData() {
                    return this.records.length > 0;
                },
                
                maskedIdCard() {
                    return this.personalInfo.idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2');
                },
                
                currentTime() {
                    return new Date().toLocaleString('zh-CN');
                },
                
                totalAmount() {
                    return this.records.reduce((sum, record) => sum + record.amount, 0);
                },
                
                totalValue() {
                    return this.records.reduce((sum, record) => sum + record.totalValue, 0);
                },
                
                averagePrice() {
                    if (this.records.length === 0) return '0.00';
                    const avg = this.totalValue / this.totalAmount;
                    return avg.toFixed(2);
                },
                
                uniqueCompanies() {
                    return new Set(this.records.map(r => r.company)).size;
                },
                
                grainTypes() {
                    return [...new Set(this.records.map(r => r.grainType))];
                },
                
                companies() {
                    return [...new Set(this.records.map(r => r.company))];
                },
                
                filteredRecords() {
                    let filtered = this.records;
                    
                    if (this.filters.grainType) {
                        filtered = filtered.filter(r => r.grainType === this.filters.grainType);
                    }
                    
                    if (this.filters.company) {
                        filtered = filtered.filter(r => r.company === this.filters.company);
                    }
                    
                    if (this.filters.dateRange && this.filters.dateRange.length === 2) {
                        const [start, end] = this.filters.dateRange;
                        filtered = filtered.filter(r => {
                            const recordDate = new Date(r.date);
                            return recordDate >= start && recordDate <= end;
                        });
                    }
                    
                    return filtered.sort((a, b) => new Date(b.date) - new Date(a.date));
                },
                
                paginatedRecords() {
                    const start = (this.pagination.currentPage - 1) * this.pagination.pageSize;
                    const end = start + this.pagination.pageSize;
                    return this.filteredRecords.slice(start, end);
                }
            },
            methods: {
                formatNumber(num) {
                    return new Intl.NumberFormat('zh-CN').format(num);
                },
                
                getGrainTypeColor(type) {
                    const colors = {
                        '小麦': 'success',
                        '玉米': 'warning',
                        '大豆': 'info',
                        '水稻': 'primary'
                    };
                    return colors[type] || '';
                },
                
                goBack() {
                    window.location.href = 'index.html';
                },
                
                printResult() {
                    window.print();
                },
                
                exportData() {
                    ElMessage.success('数据导出功能开发中...');
                },
                
                applyFilters() {
                    this.pagination.currentPage = 1;
                    ElMessage.success('筛选条件已应用');
                },
                
                resetFilters() {
                    this.filters = {
                        grainType: '',
                        company: '',
                        dateRange: null
                    };
                    this.pagination.currentPage = 1;
                    ElMessage.success('筛选条件已重置');
                },
                
                handleSizeChange(val) {
                    this.pagination.pageSize = val;
                    this.pagination.currentPage = 1;
                },
                
                handleCurrentChange(val) {
                    this.pagination.currentPage = val;
                },
                
                initTrendChart() {
                    this.trendChart = echarts.init(this.$refs.trendChart);
                    
                    // 按月统计数据
                    const monthlyData = this.getMonthlyData();
                    
                    const option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['收购量', '收购金额']
                        },
                        xAxis: {
                            type: 'category',
                            data: monthlyData.months
                        },
                        yAxis: [
                            {
                                type: 'value',
                                name: '收购量(公斤)',
                                position: 'left'
                            },
                            {
                                type: 'value',
                                name: '收购金额(元)',
                                position: 'right'
                            }
                        ],
                        series: [
                            {
                                name: '收购量',
                                type: 'bar',
                                data: monthlyData.amounts,
                                itemStyle: { color: '#4CAF50' }
                            },
                            {
                                name: '收购金额',
                                type: 'line',
                                yAxisIndex: 1,
                                data: monthlyData.values,
                                smooth: true,
                                itemStyle: { color: '#FF9800' }
                            }
                        ]
                    };
                    
                    this.trendChart.setOption(option);
                },
                
                getMonthlyData() {
                    const monthlyStats = {};
                    
                    this.records.forEach(record => {
                        const month = record.date.substring(0, 7); // YYYY-MM
                        if (!monthlyStats[month]) {
                            monthlyStats[month] = { amount: 0, value: 0 };
                        }
                        monthlyStats[month].amount += record.amount;
                        monthlyStats[month].value += record.totalValue;
                    });
                    
                    const sortedMonths = Object.keys(monthlyStats).sort();
                    
                    return {
                        months: sortedMonths.map(m => m.substring(5) + '月'),
                        amounts: sortedMonths.map(m => monthlyStats[m].amount),
                        values: sortedMonths.map(m => monthlyStats[m].value)
                    };
                },
                
                loadMockData() {
                    // 模拟收购记录数据
                    this.records = [
                        {
                            date: '2024-01-15',
                            grainType: '小麦',
                            amount: 500,
                            price: 2.80,
                            totalValue: 1400,
                            company: 'XX粮食收购站',
                            location: '张家村',
                            quality: 4
                        },
                        {
                            date: '2024-02-20',
                            grainType: '玉米',
                            amount: 300,
                            price: 2.50,
                            totalValue: 750,
                            company: 'XX粮食收购站',
                            location: '李家庄',
                            quality: 5
                        },
                        {
                            date: '2024-03-10',
                            grainType: '大豆',
                            amount: 200,
                            price: 4.20,
                            totalValue: 840,
                            company: 'YY农业合作社',
                            location: '王家屯',
                            quality: 4
                        },
                        {
                            date: '2024-04-05',
                            grainType: '小麦',
                            amount: 600,
                            price: 2.90,
                            totalValue: 1740,
                            company: 'ZZ粮食集团',
                            location: '赵家村',
                            quality: 5
                        },
                        {
                            date: '2024-05-12',
                            grainType: '水稻',
                            amount: 400,
                            price: 3.10,
                            totalValue: 1240,
                            company: 'XX粮食收购站',
                            location: '钱家庄',
                            quality: 4
                        }
                    ];
                }
            },
            
            mounted() {
                // 从URL参数或localStorage获取查询结果
                const urlParams = new URLSearchParams(window.location.search);
                const idCard = urlParams.get('idCard');
                
                if (idCard) {
                    this.personalInfo.idCard = idCard;
                    // 这里应该调用API获取真实数据
                    this.loadMockData();
                } else {
                    // 如果没有查询参数，显示无数据状态
                    this.records = [];
                }
                
                // 初始化图表
                this.$nextTick(() => {
                    if (this.hasData) {
                        this.initTrendChart();
                    }
                });
                
                // 监听窗口大小变化
                window.addEventListener('resize', () => {
                    if (this.trendChart) {
                        this.trendChart.resize();
                    }
                });
            },
            
            beforeUnmount() {
                if (this.trendChart) {
                    this.trendChart.dispose();
                }
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>